<template>
    <view class="tabs">
      <view 
      class="tab" 
      v-for="(item,index) in list" 
      :key="item.name" 
      :class="{active:index === current}"
      @click="$emit('change',index)"
      >
        {{item.name}}
      </view>
      <view class="underlineWrapper" :class="{middle:current===1,right:current===2}">
        <view class="line"></view>
      </view>
    </view>
</template>

<script>
export default {
props:{
    list:{
        type:Array,
        required:true
    },
    current:{
        type:Number,
        required:true
    }

}
}
</script>

<style lang="scss" scoped>
.tabs{
  display: flex;
  justify-content: space-around;
  position: relative;
  .tab{
    padding: 22rpx 0;
    text-align: center;
    color: #676767;
    font-size: 30rpx;
  }
  .underlineWrapper{
    width: 250rpx;
    height: 4rpx;
    position: absolute;
    bottom:0;
    left: 0rpx;
    transition: all .2s;
    padding: 0 48rpx;
    &.middle{
      left:250rpx;
    }
    &.right{
      left: 500rpx;
    }
    .line{
      background: #EA4350;
      width: 100%;
      height: 100%;
    }
  }
}
</style>